<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="农安县博物馆书画展览 - 展示中国传统书画艺术精品，包括山水画、花鸟画、书法作品等">
  <meta name="keywords" content="农安县博物馆,书画展览,中国传统艺术,山水画,花鸟画,书法作品,国画">
  <title>农安县博物馆书画展览 送展作品</title>
  <!-- 引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <!-- 全局样式 -->
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      font-family: 'Microsoft YaHei', 'PingFang SC', system-ui, Avenir, Helvetica, Arial, sans-serif;
      line-height: 1.6;
      font-weight: 400;

      color-scheme: light;
      color: #333333;
      background-color: #f5f5f5;

      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
    }

    #app {
      width: 100%;
      min-height: 100vh;
    }

    h1, h2, h3, h4, h5, h6 {
      color: #333;
      font-weight: 600;
    }

    a {
      color: #3a7bd5;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    a:hover {
      color: #2959a0;
      text-decoration: underline;
    }

    button {
      border-radius: 4px;
      border: 1px solid transparent;
      padding: 0.5em 1em;
      font-size: 1em;
      font-weight: 500;
      font-family: inherit;
      background-color: #3a7bd5;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    button:hover {
      background-color: #2959a0;
      transform: translateY(-1px);
    }

    button:focus,
    button:focus-visible {
      outline: 2px solid #3a7bd5;
      outline-offset: 2px;
    }

    /* 加载动画 */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 防止图片拖拽 */
    img {
      user-select: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
    }
  </style>
  <!-- 画廊样式 -->
  <style>
    .art-gallery {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      padding: 2rem 0;
      text-align: center;
      background-color: #f0e6d2; /* 温暖的米色，营造艺术氛围 */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    header h1 {
      margin: 0;
      font-size: 2.5rem;
      color: #333;
      font-weight: 700;
    }

    .gallery-info {
      margin-top: 0.5rem;
      color: #666;
      font-size: 1rem;
    }

    .reset-btn-container {
      display: flex;
      justify-content: center;
      margin: 1rem 0;
    }

    .reset-btn {
      padding: 8px 16px;
      background-color: #f44336;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background-color 0.3s ease;
    }

    .reset-btn:hover {
      background-color: #d32f2f;
    }

    main {
      flex: 1;
      padding: 2rem 1rem;
      background-color: #f8f4e9; /* 温暖的米黄色，营造艺术氛围 */
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .gallery-item {
      cursor: pointer;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      position: relative;
      animation: fadeIn 0.5s ease-out;
    }

    .gallery-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    }

    .gallery-item img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
      border-radius: 12px 12px 0 0;
    }

    .gallery-item:hover img {
      transform: scale(1.05);
    }

    .image-name {
      padding: 1rem;
      background-color: #fff;
      text-align: center;
      position: relative;
      min-height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .image-name span {
      font-size: 0.95rem;
      color: #333;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .image-name span:hover {
      color: #3a7bd5;
    }

    .image-name input {
      width: 100%;
      padding: 0.5rem;
      border: 2px solid #3a7bd5;
      border-radius: 4px;
      font-size: 0.95rem;
      outline: none;
      text-align: center;
    }

    .image-viewer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2c2c2c; /* 深灰色，比纯黑更柔和更有艺术感 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      align-content: center;
      z-index: 1000;
      padding: 2rem;
      animation: fadeIn 0.3s ease;
      display: none;
      /* 确保容器内的内容垂直居中 */
      overflow: hidden;
    }

    .image-viewer img {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      margin: auto; /* 确保图片始终居中 */
      display: block;
    }

    .viewer-caption {
      position: absolute;
      bottom: 2rem;
      background-color: rgba(44, 44, 44, 0.7); /* 与背景色协调的半透明深灰色 */
      color: white;
      padding: 0.8rem 1.5rem;
      border-radius: 20px;
      font-size: 1.2rem;
      font-weight: 500;
      max-width: 80%;
      text-align: center;
      animation: slideUp 0.5s ease;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      header h1 {
        font-size: 2rem;
      }
      
      .gallery-grid {
        grid-template-columns: 1fr; /* 在手机屏幕上显示为单列 */
        gap: 1rem;
      }
      
      .gallery-item img {
        height: 200px;
      }
      
      .viewer-caption {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
        bottom: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      header {
        padding: 1rem 0;
      }
      
      header h1 {
        font-size: 1.5rem;
      }
      
      main {
        padding: 1rem 0.5rem;
      }
      
      .gallery-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }
      
      .gallery-item img {
        height: 160px;
      }
      
      .image-name {
        padding: 0.8rem 0.5rem;
      }
      
      .image-name span {
        font-size: 0.85rem;
      }
      
      .viewer-caption {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        bottom: 1rem;
      }
      
      .image-viewer {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="art-gallery">
      <header>
        <h1>农安县博物馆书画展览 送展作品</h1>
        <p class="gallery-info">共 <span id="image-count">0</span> 幅作品</p>
      </header>
      
      <main>
        <div class="gallery-grid" id="gallery-grid">
          <!-- 图片将通过JavaScript动态生成 -->
        </div>
      </main>

      <!-- 重置数据按钮 -->
      <div class="reset-btn-container">
        <button id="reset-btn" class="reset-btn" style="display: none;">
          重置图片数据
        </button>
        <button id="clear-cache-btn" class="reset-btn">
          清除缓存数据
        </button>
      </div>

    </div>

    <!-- 图片查看器 -->
    <div id="image-viewer" class="image-viewer">
      <img id="viewer-image" src="" alt="" />
      <div class="viewer-caption" id="viewer-caption"></div>
    </div>
  </div>

  <script>
    // 全局数据
    let images = [];
    let selectedImage = null;
    let selectedIndex = -1;
    let editingIndex = -1;
    let editingName = '';

    // DOM元素
    const $galleryGrid = $('#gallery-grid');
    const $imageCount = $('#image-count');
    const $resetBtn = $('#reset-btn');
    const $imageViewer = $('#image-viewer');
    const $viewerImage = $('#viewer-image');
    const $viewerCaption = $('#viewer-caption');
    const $prevBtn = $('#prev-btn');
    const $nextBtn = $('#next-btn');

    // 从localStorage加载图片数据
    function loadImagesFromStorage() {
      const storedImages = localStorage.getItem('artGalleryImages');
      if (storedImages) {
        try {
          images = JSON.parse(storedImages);
          console.log('从localStorage加载图片数据');
        } catch (e) {
          console.error('localStorage数据解析错误，使用默认数据', e);
          initializeDefaultImages();
        }
      } else {
        // 初始图片数据
        initializeDefaultImages();
      }
      renderGallery();
    }

    // 初始化默认图片数据
    function initializeDefaultImages() {
      console.log('初始化默认图片数据，使用相对路径 ./pic/');
      images = [
        { name: '牡丹 都本基', path: './pic/牡丹 都本基.jpg' },        
        { name: '君子之交 都本基', path: './pic/君子之交 都本基.jpg' }, 
        { name: '天地酬勤 都本基', path: './pic/天地酬勤 都本基.jpg' },
        { name: '一顺百顺 都本基', path: './pic/一顺百顺 都本基.jpg' },
        { name: '在任何情况下学习最重要 都本基', path: './pic/在任何情况下学习最重要 都本基.jpg' },
        { name: '意 都本基', path: './pic/意 都本基.jpg' },
        { name: '暖心 都本基', path: './pic/暖心 都本基.jpg' },
        { name: '百顺百畅 都本基', path: './pic/百顺百畅 都本基.jpg' },
        { name: '能受天磨真好汉 都本基', path: './pic/能受天磨真好汉 都本基.jpg' },
        { name: '萬 都本基', path: './pic/萬 都本基.jpg' },
        { name: '赵本山书法', path: './pic/赵本山书法.jpg' },
        { name: '大字成吉思汗 小字一代天骄成吉汗 科尔沁夫', path: './pic/大字成吉思汗 小字一代天骄成吉汗 科尔沁夫.jpg' },
        { name: '心静茶更香 单锐敏', path: './pic/心静茶更香 单锐敏.jpg' }
      ];
      saveImagesToStorage();
    }

    // 保存图片数据到localStorage
    function saveImagesToStorage() {
      localStorage.setItem('artGalleryImages', JSON.stringify(images));
    }

    // 渲染画廊
    function renderGallery() {
      $galleryGrid.empty();
      $imageCount.text(images.length);
      $resetBtn.toggle(images.length > 0);

      images.forEach((item, index) => {
        const $galleryItem = $('<div>').addClass('gallery-item');
        const $img = $('<img>')
          .attr('src', item.path)
          .attr('alt', item.name)
          .attr('loading', 'lazy')
          .on('click', () => openImageViewer(item, index));
        const $imageName = $('<div>').addClass('image-name');
        const $span = $('<span>')
          .text(item.name)
          .on('dblclick', () => startEditing(index));

        $imageName.append($span);
        $galleryItem.append($img).append($imageName);
        $galleryGrid.append($galleryItem);
      });
    }

    // 打开图片查看器
    function openImageViewer(item, index) {
      selectedImage = item;
      selectedIndex = index;
      $viewerImage.attr('src', item.path).attr('alt', item.name);
      $viewerCaption.text(item.name);
      $imageViewer.show();
      $('body').css('overflow', 'hidden');
      
      // 确保图片在查看器中居中显示
      $viewerImage.css({
        'display': 'block',
        'margin': 'auto',
        'max-height': '80vh',
        'max-width': '100%'
      });
    }

    // 关闭图片查看器
    function closeImageViewer() {
      $imageViewer.hide();
      $('body').css('overflow', '');
    }

    // 查看上一张图片
    function prevImage(e) {
      if (e) e.stopPropagation();
      if (images.length > 0) {
        selectedIndex = (selectedIndex - 1 + images.length) % images.length;
        selectedImage = images[selectedIndex];
        $viewerImage.attr('src', selectedImage.path).attr('alt', selectedImage.name);
        $viewerCaption.text(selectedImage.name);
      }
    }

    // 查看下一张图片
    function nextImage(e) {
      if (e) e.stopPropagation();
      if (images.length > 0) {
        selectedIndex = (selectedIndex + 1) % images.length;
        selectedImage = images[selectedIndex];
        $viewerImage.attr('src', selectedImage.path).attr('alt', selectedImage.name);
        $viewerCaption.text(selectedImage.name);
      }
    }

    // 开始编辑图片名称
    function startEditing(index) {
      if (editingIndex !== -1) return;
      
      editingIndex = index;
      editingName = images[index].name;
      
      const $galleryItem = $galleryGrid.children().eq(index);
      const $imageName = $galleryItem.find('.image-name');
      const $span = $imageName.find('span');
      
      const $input = $('<input>')
        .attr('type', 'text')
        .val(editingName)
        .on('blur', finishEditing)
        .on('keyup', (e) => {
          if (e.key === 'Enter') finishEditing();
          else if (e.key === 'Escape') cancelEditing();
        });
      
      $span.hide();
      $imageName.append($input);
      $input.focus().select();
    }

    // 完成编辑
    function finishEditing() {
      if (editingIndex !== -1) {
        const $galleryItem = $galleryGrid.children().eq(editingIndex);
        const $imageName = $galleryItem.find('.image-name');
        const $input = $imageName.find('input');
        const $span = $imageName.find('span');
        
        const newName = $input.val().trim();
        if (newName) {
          images[editingIndex].name = newName;
          $span.text(newName);
          saveImagesToStorage();
          // 更新查看器中的标题（如果当前正在查看这张图片）
          if (selectedIndex === editingIndex) {
            $viewerCaption.text(newName);
          }
        }
        
        $input.remove();
        $span.show();
        editingIndex = -1;
      }
    }

    // 取消编辑
    function cancelEditing() {
      if (editingIndex !== -1) {
        const $galleryItem = $galleryGrid.children().eq(editingIndex);
        const $imageName = $galleryItem.find('.image-name');
        const $input = $imageName.find('input');
        const $span = $imageName.find('span');
        
        $input.remove();
        $span.show();
        editingIndex = -1;
      }
    }

    // 重置图片数据
    function resetImagesData() {
      if (confirm('确定要重置图片数据吗？这将扫描并显示pic目录中的所有图片，并保留您已编辑的图片名称。')) {
        // 保存用户已编辑的图片名称
        const userEditedNames = {};
        images.forEach(item => {
          const fileName = item.path.split('/').pop().toLowerCase();
          userEditedNames[fileName] = item.name;
        });
        
        console.log('重置图片数据，使用相对路径 ./pic/');
        // 从预设的默认图片数据开始
        const defaultImages = [
          { name: '山水图 1', path: './pic/IMG_1721_已加框.jpg' },
          { name: '山水图 2', path: './pic/IMG_1729_已加框.jpg' },
          { name: '花鸟图', path: './pic/IMG_1735_已加框.jpg' },
          { name: '书法作品 1', path: './pic/IMG_1741_已加框.jpg' },
          { name: '书法作品 2', path: './pic/IMG_1743_已加框.jpg' },
          { name: '山水画', path: './pic/IMG_1749_已加框.jpg' },
          { name: '水墨画', path: './pic/IMG_1752_已加框.jpg' },
          { name: '一顺百顺', path: './pic/202401012153一顺百顺_已加框.jpg' },
          { name: '书法作品 3', path: './pic/SCAN0001_已加框.jpg' },
          { name: '山水图 3', path: './pic/IMG_1730_已加框.jpg' },
          { name: '在任何情况下学习最重要 都本基', path: './pic/在任何情况下学习最重要_已加框.jpg' },
          { name: '暖心 都本基', path: './pic/暖心_已加框.jpg' },
          { name: '心静茶更香 单锐敏', path: './pic/更茶静心双平_已加框.jpg' }
        ];
        
        // 重置图片数据为默认图片数组
        images = defaultImages;
        
        // 恢复用户已编辑的图片名称
        images.forEach(item => {
          const fileName = item.path.split('/').pop().toLowerCase();
          if (userEditedNames[fileName]) {
            item.name = userEditedNames[fileName];
          }
        });
        
        // 强制保存到localStorage
        saveImagesToStorage();
        renderGallery();
        alert('图片数据已重置，您编辑的图片名称已保留！');
      }
    }

    // 键盘事件处理
    function handleKeyDown(e) {
      if (e.key === 'Escape') {
        if (editingIndex !== -1) {
          cancelEditing();
        } else if ($imageViewer.is(':visible')) {
          closeImageViewer();
        }
      } else if ($imageViewer.is(':visible')) {
        // 在图片查看器打开时，支持左右方向键切换图片
        if (e.key === 'ArrowLeft') {
          prevImage();
        } else if (e.key === 'ArrowRight') {
          nextImage();
        }
      }
    }

    // 清除localStorage缓存
    function clearCache() {
      if (confirm('确定要清除所有缓存数据吗？这将恢复到默认的图片名称。')) {
        localStorage.removeItem('artGalleryImages');
        alert('缓存数据已清除，页面将刷新以显示最新修改！');
        location.reload();
      }
    }

    // 触摸滑动相关变量
    let touchStartX = 0;
    let touchEndX = 0;

    // 处理触摸开始事件
    function handleTouchStart(e) {
      touchStartX = e.changedTouches[0].screenX;
    }

    // 处理触摸结束事件
    function handleTouchEnd(e) {
      touchEndX = e.changedTouches[0].screenX;
      handleSwipeGesture();
    }

    // 处理滑动手势
    function handleSwipeGesture() {
      // 定义最小滑动距离
      const minSwipeDistance = 50;
      
      // 向左滑动（显示下一张）
      if (touchEndX < touchStartX - minSwipeDistance) {
        nextImage();
      }
      // 向右滑动（显示上一张）
      else if (touchEndX > touchStartX + minSwipeDistance) {
        prevImage();
      }
    }

    // 事件绑定
    function bindEvents() {
      // 图片查看器事件
      $imageViewer.on('click', closeImageViewer);
      
      // 添加触摸事件监听
      $imageViewer.on('touchstart', handleTouchStart);
      $imageViewer.on('touchend', handleTouchEnd);
      
      // 重置按钮事件
      $resetBtn.on('click', resetImagesData);
      
      // 清除缓存按钮事件
      $('#clear-cache-btn').on('click', clearCache);
      
      // 键盘事件
      $(window).on('keydown', handleKeyDown);
      
      // 清理事件监听
      $(window).on('beforeunload', () => {
        $(window).off('keydown', handleKeyDown);
        $imageViewer.off('touchstart', handleTouchStart);
        $imageViewer.off('touchend', handleTouchEnd);
      });
    }

    // 初始化
    function init() {
      bindEvents();
      loadImagesFromStorage();
    }

    // 页面加载完成后初始化
    $(document).ready(init);
  </script>
</body>
</html>